<template>
    <div>
        <h3>{{ title }}学生</h3>
        <div>
            <label>学生姓名： <input type="text" v-model.lazy="studentItem.name"></label>
        </div>
        <div>
            <label>学生年龄： <input type="text" v-model.lazy="studentItem.age"></label>
        </div>
        <div>
            <button @click="onOk">确认{{ title }}</button>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
const { updateStudent } = defineProps({
    updateStudent: {
        type: Object,
        default() {
            return {}
        }
    }
})
const emit = defineEmits(['onAddStudent', 'onUpdateStudent'])
const studentItem = ref({});


const title = computed(() => {
    if (studentItem.value.id) {
        return '修改'
    }
    return '新增'
})

// 当【要修改的学生对象】数据发生变化时，将最新的数据赋值给studentItem
watch(() => updateStudent, () => {
    studentItem.value = updateStudent;
})


function onOk() {
    if (studentItem.value.id) {
        // 修改
        emit('onUpdateStudent', studentItem.value)
    } else {
        emit('onAddStudent', studentItem.value)
    }
}

</script>

<style scoped></style>